<template>
  <!-- 洪水预报 -->
  <div class="river-top">
    <div class="river-top-head">
      <span class="title-font">预报雨量站信息</span>
    </div>
    <div class="river-top-list">
      <div class="table-box">
        <el-table border :data="stationInfo" style="width: 100%" height="100%">
          <el-table-column prop="stcd" label="站点编码" align="center" />
          <el-table-column prop="stnm" label="站点名称" align="center" />
          <!-- <el-table-column prop="rainLen" label="操作" align="center">
            <template #default>
              <el-button type="primary" link>定位</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
  <div class="river-bottom">
    <span class="title-font">模型建模参数文件</span>
    <div class="config-box">
      <div class="tabs-box">
        <el-tabs v-model="timeTabs" @tab-change="acceptAiFilename">
          <el-tab-pane label="24小时" :name="24">
            <el-table :data="fileDataList" border style="width: 100%">
              <el-table-column prop label="序号" align="center" type="index" width="100px" />
              <el-table-column prop="fname" label="字段名" align="center" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="48小时" :name="48">
            <el-table :data="fileDataList" border style="width: 100%">
              <el-table-column prop label="序号" align="center" type="index" width="100px" />
              <el-table-column prop="fname" label="字段名" align="center" /> </el-table
          ></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

  <!-- 弹窗 -->
</template>
<script setup>
import { reactive, ref, watch } from 'vue'

import {
  // 模型管理 ai降雨预报模型配置 查询预报雨量站信息
  getAiStationInfo,
  // 查询降雨信息参数文件名
  getAiFilename
  // // 查询ai调度模型参数表
  // getReservoirOptimsList,
  // 查询AI洪水方案信息列表、
  // getFloodSchemeList
} from '@/services/modules/model-config'

const props = defineProps({
  // 点击断面 水库的信息
  sectionObj: {
    type: Object,
    default: () => {}
  },
  // 模型信息
  modelobj: {
    type: Object,
    default: () => {}
  },
  // 流域信息
  zoneId: {
    type: Number,
    default: 1
  }
})
const stationInfo = ref([])
const fileDataList = ref([])
const timeTabs = ref(24)
const state = reactive({
  // 基础信息，参数信息
  baseData: [],
  // 底部列表数据
  paramsData: [],
  planList: [],
  url: '',

  val: '20230405AI降雨参数文件'
})

// 查询ai洪水方案信息列表
const acceptAiStationInfo = () => {
  getAiStationInfo({ zoneId: props.zoneId }).then((res) => {
    if (res.code == 200) {
      stationInfo.value = res.data
    }
  })
}
// 查询降雨信息参数文件名
const acceptAiFilename = () => {
  getAiFilename({ zoneId: props.zoneId, time: timeTabs.value }).then((res) => {
    if (res.code == 200) {
      fileDataList.value = res.data
    }
  })
}
watch(
  () => {
    props.zoneId
  },
  () => {
    // 流域切换 获取预报雨量站信息
    acceptAiStationInfo()
    acceptAiFilename()
  },
  {
    deep: true,
    immediate: true
  }
)

// 查询预报断面基础信息
// const acceptForecastSectionInfo = () => {
//   getForecastSectionInfo({ blkcd: props.sectionObj.blkcd }).then((res) => {
//     if (res.code == 200) {
//       state.baseData = res.data
//     }
//   })
// }
// 查询底部参数表
// const acceptBottomData = () => {
//   getReservoirOptimsList({ zoneId: props.zoneId, blkcd: props.sectionObj.blkcd }).then((res) => {
//     if (res.code == 200) {
//       state.paramsData = res.data
//     }
//   })
// }
</script>
<style lang="less" scoped>
.weight-box {
  display: flex;
  align-items: center;

  :deep(.el-input) {
    width: 80%;
  }
}
.river-top {
  width: 100%;
  height: 500px;
  padding: 5px 0px;
  font-size: var(--content-fontsize);
  box-sizing: border-box;
  .river-top-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    .title-font {
      color: #409eff;
    }
  }
  .river-top-list {
    // height: 200px;
    height: calc(100% - 30px);
    padding: 0 0px;
    margin-top: 7px;
    .table-box {
      width: 100%;
      height: 100%;
    }
    .page-box {
      display: flex;
      // justify-content: end;
      justify-content: flex-end;
      align-items: center;
      height: calc(100% - 205px);
      border-bottom: 1px solid rgb(163, 163, 163);
    }
  }
}
.river-bottom {
  width: 100%;
  // height: 455px;
  height: calc(100% - 560px);
  padding: 5px 0px;
  box-sizing: border-box;
  font-size: var(--content-fontsize);

  .title-font {
    margin-top: 10px;
    display: block;
    height: 35px;
    line-height: 35px;
    color: #409eff;
  }
  .config-box {
    height: calc(100% - 35px);
    padding: 0px 0px;
    .paramsSelect-box {
      height: 50px;
      display: flex;
      align-items: center;
    }
    .tabs-box {
      // height: calc(100% - 50px);
      height: 100%;
      :deep(.el-tabs) {
        height: 100%;
        .file-input {
          display: flex;
          align-items: center;
          color: #797979;
          .el-input {
            width: 400px;
            margin-right: 10px;
          }
        }
        .el-tabs__content {
          height: calc(100% - 70px);
          overflow-y: auto;
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
    .config-box-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 35px;
      width: 100%;
      .config-plan-left {
        display: flex;
        align-items: center;
        .config-plan-title {
          margin-right: 15px;
        }
        .plan-option {
          margin-left: 5px;
          color: #0054db;
          cursor: pointer;
        }
      }
      .config-plan-right {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-pading {
          margin-right: 15px;
        }
      }
    }
    .config-tabs {
      box-sizing: border-box;
      margin-top: 15px;
      height: calc(100% - 75px);
      :deep(.el-textarea) {
        height: 100%;
        .el-textarea__inner {
          height: 100%;
        }
      }
      :deep(.el-tabs) {
        height: 100%;
        .el-tabs__content {
          height: calc(100% - 55px);
          padding: 10px;
          .el-tab-pane {
            height: 100%;
            .upload-box {
              display: flex;
              // justify-content: space-between;
              align-items: center;
              .left-title {
                margin-right: 20px;
              }
              .el-input {
                width: 400px;
                margin-right: 20px;
              }
            }
          }
        }
      }
      .rainfall-config-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        .rain-left {
          height: 100%;
          width: 180px;
          .computed-title {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #f2f2f2;
          }
          .computed-main {
            overflow-y: auto;
            height: calc(100% - 40px);
            background: #d7d4d427;
            .unit-item {
              display: flex;
              align-items: center;
              justify-content: space-around;
              height: 40px;
              &.active {
                background-color: #f2f2f2;
                color: #0054db;
              }
              .basin-code {
                cursor: pointer;
              }
              .basin-location {
                cursor: pointer;
              }
            }
          }
        }
        .rain-right {
          height: 100%;
          width: calc(100% - 190px);

          .rainfall-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 35px;
            padding: 0 20px;
            line-height: 35px;
            box-sizing: border-box;
          }
          .rainfall-table-box {
            height: calc(100% - 35px);
            padding: 10px;
            box-sizing: border-box;
          }
        }
      }
      .model-parameter {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0 5px;
        box-sizing: border-box;
        :deep(.el-textarea__inner) {
          resize: none;
        }
        .confluence-box {
          width: 320px;
          height: 100%;
          .confluence-title {
            display: inline-block;
            height: 20px;
            font-weight: 600;
          }
          .confluence-main {
            display: flex;
            justify-content: space-between;
            height: calc(100% - 230px);
            padding: 0 10px;
            margin-top: 5px;
            box-sizing: border-box;
            &.w200 {
              height: calc(100% - 400px);
            }
            .parameter-model {
              width: 48%;
              .parameter-model-title {
                display: block;
                height: 25px;
                line-height: 25px;
              }
              .parameter-model-text {
                width: 100%;
                height: calc(100% - 45px);
                margin-top: 5px;
              }
            }
            .parameter-explain {
              width: 48%;
              .parameter-explain-title {
                display: block;
                height: 25px;
                line-height: 25px;
              }
              .parameter-explain-text {
                width: 100%;
                height: calc(100% - 45px);
                margin-top: 5px;
              }
            }
          }
        }
        .evolution-box {
          width: calc(100% - 330px);
          height: 100%;
          .evolution-title {
            display: inline-block;
            height: 20px;
            font-weight: 600;
          }
          .evolution-main {
            height: calc(100% - 25px);
            padding: 0 10px;
            box-sizing: border-box;
            margin-top: 10px;
            .evolution-main-top {
              display: flex;
              justify-content: space-between;
              height: 100px;
              .river-params {
                width: 43%;
                .river-params-title {
                  display: block;
                  height: 20px;
                }
                .river-params-text {
                  height: 82px;
                }
              }
              .params-explain {
                width: 55%;
                .params-explain-title {
                  display: block;
                  height: 20px;
                }
                .params-explain-text {
                  height: 82px;
                }
              }
            }
            .evolution-main-bottom {
              height: calc(100% - 20px);
              .el-tabs__header {
                margin-bottom: 0px;
              }
              .unit-section {
                display: flex;
                justify-content: space-between;
                height: calc(100% - 15px);
                .river-course {
                  width: 47%;
                  height: 100%;
                  .computed-title {
                    display: flex;
                    justify-content: space-between;
                    height: 20px;
                    line-height: 20px;
                    padding: 0 8px;
                    background-color: #f2f2f2;
                  }
                  .river-course-title {
                    width: 100%;
                    height: 20px;
                    background-color: #f2f2f2;
                    line-height: 20px;
                    text-align: center;
                  }
                  .river-course-main {
                    overflow-y: auto;
                    height: calc(100% - 10px);
                    background: #d7d4d427;
                    .river-item {
                      display: block;
                      height: 30px;
                      width: 100%;
                      line-height: 30px;
                      text-align: center;
                      cursor: pointer;
                      &.active {
                        background: #f2f2f2;
                        color: #0054db;
                      }
                    }
                    .computed-item {
                      display: flex;
                      justify-content: space-between;
                      height: 25px;
                      padding: 2px 10px;
                      line-height: 25px;
                      text-align: center;
                      cursor: pointer;
                      &.active {
                        background: #f2f2f2;
                        color: #0054db;
                      }
                      .computed-item-name {
                        width: 60px;
                        display: inline-block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      }
                    }
                  }
                }
                .bottom-model-params {
                  width: 50%;
                  height: 100%;

                  .model-title {
                    display: block;
                    height: 20px;
                  }
                  .model-params {
                    height: calc((100% - 28px) / 2);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
